<template>
  <el-card @update:modelValue="updateModelValue">
    <template #header>
      <div class="card-header">
        <span>基本信息采集</span>
      </div>
    </template>
    <div>
      <el-alert :title="'当前采集学生:'+form.name+'(学号:'+form.code+')'" type="success" :closable="false"
                style="margin-bottom: 15px;"/>
    </div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input
          clearable
          v-model="form.phoneNumber"
          placeholder="请输入手机号"
        />
        <div class="item-tip">请输入你的手机号</div>
      </el-form-item>
      <el-form-item label="qq" prop="qq">
        <el-input
          clearable
          v-model="form.qq"
          placeholder="请输入qq"
        />
        <div class="item-tip">请输入你的QQ号</div>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          clearable
          v-model="form.email"
          placeholder="请输入邮箱"
        />
        <div class="item-tip">请输入你的电子邮箱，如：userName@qq.com</div>
      </el-form-item>
      <el-form-item label="家庭地址" prop="homeAddress">
        <el-input
          clearable
          v-model="form.homeAddress"
          placeholder="请输入家庭地址"
        />
        <div class="item-tip">请填写你详细的家庭地址，格式参照：XX省XX市XX区\县XX街道\镇XX路\村XX小区\村</div>
      </el-form-item>
      <el-form-item label="家庭邮编" prop="homeCode">
        <el-input
          clearable
          v-model="form.homeCode"
          placeholder="请输入家庭邮编"
        />
        <div class="item-tip">请填写你的家庭地址邮编</div>
      </el-form-item>
      <el-form-item label="家庭电话" prop="homePhone">
        <el-input
          clearable
          v-model="form.homePhone"
          placeholder="请输入家庭电话"
        />
        <div class="item-tip">
          请填写你的家庭电话，可以为手机号（非本人手机号），也可以为座机号（座机号请加上区号，如：0591-89893159）
        </div>
      </el-form-item>
      <el-form-item label="户口是否转入学校" prop="isHkInSchool">
        <el-radio-group v-model="form.isHkInSchool" id="isHkInSchool">
          <el-radio :label="'1'">未转入</el-radio>
          <el-radio :label="'0'">已转入</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="城乡生源" prop="isCityStudent">
        <el-radio-group v-model="form.isCityStudent" id="isCityStudent">
          <el-radio :label="'1'">城镇</el-radio>
          <el-radio :label="'2'">农村</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入学前户口所在单位" prop="rxqhkszdpcs">
        <el-input
          clearable
          v-model="form.rxqhkszdpcs"
          placeholder="请输入入学前户口所在单位，一般为户口所在地派出所"
        />
        <div class="item-tip">请填写入学前户口所在单位，一般为户口所在地派出所，单位名称填写详细全称</div>
      </el-form-item>
      <el-form-item label="入学前档案所在单位" prop="rxqdaszdw">
        <el-input
          clearable
          v-model="form.rxqdaszdw"
          placeholder="请输入入学前档案所在单位，一般为高中、大专或人才市场"
        />
        <div class="item-tip">请填写入学前档案所在单位，一般为高中、大专或人才市场，单位名称填写详细全称</div>
      </el-form-item>
      <div style="text-align: center;">
        <el-button @click="goBack">返回上一步</el-button>
        <el-button type="primary" @click="goNext" :loading="loading">提交，前往下一步</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script setup>
import {reactive, ref, watch} from 'vue';
import {EleMessage} from 'ele-admin-plus/es';
import {useFormData} from '@/utils/use-form-data';
import {selectStudentBaseInfo, submitBaseInfo} from '@/api/student';

const emit = defineEmits(['done', 'update:modelValue']);

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Number,
});
/** 更新modelValue */
const updateModelValue = (value) => {
  emit('update:modelValue', value);
};

/** 提交状态 */
const loading = ref(false);

/** 表单实例 */
const formRef = ref(null);


const [form, resetFields, assignFields] = useFormData({
  id: void 0,
  name: '',//姓名
  code: '',//学号
  phoneNumber: '',//手机号码
  qq: '',//QQ号码
  email: '',//电子邮箱
  homeAddress: '',//家庭地址
  homeCode: '',//家庭邮编
  homePhone: '',//家庭电话
  isHkInSchool: '1',//户口是否转入学校
  isCityStudent: '1',//城乡生源
  rxqhkszdpcs: '',//入学前户口所在单位
  rxqdaszdw: '',//入学前档案所在单位
});


/** 表单验证规则 */
const rules = reactive({
  phoneNumber: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    },
    {
      pattern: /^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  qq: [
    {
      required: true,
      message: '请输入qq',
      trigger: 'blur',
    },
    {max: 18, message: 'qq号码长度超出限制', trigger: 'blur'}
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur',
    },
    {type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]},
    {max: 80, message: '邮箱长度超出限制', trigger: 'blur'}
  ],
  homeAddress: [
    {
      required: true,
      message: '请输入家庭地址',
      trigger: 'blur',
    },
    {max: 90, message: '家庭地址长度超出限制', trigger: 'blur'}
  ],
  homeCode: [
    {
      required: true,
      message: '请输入家庭邮编',
      trigger: 'blur',
    },
    {max: 8, message: '家庭邮编长度超出限制', trigger: 'blur'}
  ],
  homePhone: [
    {
      required: true,
      message: '请输入家庭联系电话',
      trigger: 'blur',
    },
    {max: 18, message: '家庭电话长度超出限制', trigger: 'blur'}
  ],
  rxqhkszdpcs: [
    {
      required: true,
      message: '请输入入学前户口所在单位',
      trigger: 'blur',
    },
    {max: 180, message: '入学前户口所在地派出所长度超出限制', trigger: 'blur'}
  ],
  rxqdaszdw: [
    {
      required: true,
      message: '请输入入学档案所在单位',
      trigger: 'blur',
    },
    {max: 180, message: '入学前档案所在单位长度超出限制', trigger: 'blur'}
  ],
  isHkInSchool: [
    {
      required: true,
      message: '请选择入学档案所在单位',
      trigger: 'blur',
    },
  ],
  isCityStudent: [
    {
      required: true,
      message: '请选择城乡生源类型',
      trigger: 'blur',
    },
  ]
});

//提交
const goNext = () => {
  let index = props.modelValue;
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    // const saveOrUpdate = isUpdate.value ? updateStudentRecommend : addStudentRecommend;
    submitBaseInfo(form)
      .then((msg) => {
        loading.value = false;
        EleMessage.success("保存成功，请继续填写");
        updateModelValue(++index);
      })
      .catch((e) => {
        loading.value = false;
        EleMessage.error(e.message);
      });
  });
}

//返回上一步
const goBack = () => {
  let index = props.modelValue;
  updateModelValue(--index);
}


//这个代码好像没有执行
watch(
  () => props.modelValue,
  (modelValue) => {
    if (modelValue) {
    } else {
      resetFields();
      formRef.value?.clearValidate?.();
    }
  }
);


const selectBaseInfo = () => {
  selectStudentBaseInfo().then(
    response => {

      form.name = response.data.name;
      form.code = response.data.code;

      form.phoneNumber = response.data.phoneNumber;
      form.qq = response.data.qq;
      form.email = response.data.email;

      form.homeAddress = response.data.homeAddress;
      form.homeCode = response.data.homeCode;
      form.homePhone = response.data.homePhone;

      form.isHkInSchool = response.data.isHkInSchool ? response.data.isHkInSchool : '1';
      form.isCityStudent = response.data.isCityStudent ? response.data.isCityStudent : '1';

      form.rxqhkszdpcs = response.data.rxqhkszdpcs;
      form.rxqdaszdw = response.data.rxqdaszdw;
    });
}

//查询学生的
selectBaseInfo();

</script>


<style>
.item-tip {
  font-size: 12px;
  color: #8a8f97;
}
</style>
